<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/trip_traval.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/coupon_total.css" />
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
<script src="${ctxStatic }/mui/js/mui.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/mui/js/mui.view.js" ></script>
<style>
			.mui-input-group {
			background: none;
		}
		
		.mui-input-group:after {
			background: none;
		}
		.mui-table-view{
			background: none;
		}
		.mui-input-row {
			background: #fff;
		}
.trip_explan_box li:nth-child(5) {
    margin-top: 0;
}
.tripv_fg,.tripv_og{
	width: 30%;
	float: left;
}
.tripv_fg span,.tripv_og span{
	float: left;
	font-size: 14px;
	padding-left: 5px;
}
.tripv_fg input,.tripv_og input{
	width: auto; 
	margin-top: 4px;
	margin-left: 15px;
	float: left;
}
.reserve_body {
    margin: 0;
    background: #fff;
  padding: 10px;
}
		.trip_p_costs{
	float: left;
	width: 35%;
	line-height: 40px;
	font-size: 14px;
	color: #333;
	padding-left: 10px;
}
.trip_pa_writ{
	float: left;
	width: 65% !important;
	margin-bottom: 0 !important;
	border: 0 !important;
	font-size: 14px;
	border-radius: 5px;
}
	</style>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<div id="trip_traval_ac"  class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">基础套餐</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						 <div class="trip_wrap">
						  <form class="mui-input-group " id="subForm">
						  	<input type="hidden" name="cuponsId" value="" id="cuponsId"/>
				    		<input type="hidden" value="" id="cuponsMoney" name="money"/>
							<input type="hidden" name="userId" value="${sessionScope.front_user.id}" />
							<input type="hidden" name="departCity" value="${departcitySiteid}" />
							<input type="hidden" name="cityCode" value="${descitySiteid}" />
							<input type="hidden" name="depart" value="${tripstime}" />
							<input type="hidden" name="over" value="${travaltime}" />
							<input type="hidden" name="child" value="${childNum}" />
							<input type="hidden" name="person" value="${adultNum}" />
							<input type="hidden" name="setmeal" value="${tripradio}" />
							<input type="hidden" name="lodgeBudget" value="" />
							<input type="hidden" name="scenery" value="" />
							<input type="hidden" name="price" value="${price}" />
							<input type="hidden" name="theme" value="" />
							<input type="hidden" name="transportWay" value="" />
							<ul class="mui-table-view trip_explan_box">
						             <li class="mui-table-view-cell">
						                 <a href="#trip_play" class="mui-navigate-right" id="them">
						                         <span class="trip_expan_img">
						                         	<img src="${ctxStatic }/wx/img/day_img/youwan_taocan@2x.png " />
						                         </span>
						                         <label>游玩主题</label>
						                        <input class="trip_play_v" type="text " placeholder="不限 " />
						                 </a>
						             </li>
						             <li class="mui-table-view-cell ">
						                  <a href="#trip_traffic" class="mui-navigate-right ">
						                         <span class="trip_expan_img">
						                         	<img src="${ctxStatic }/wx/img/day_img/jiaotong@2x.png " />
						                         </span>
						                         <label>交通方式</label>
						                        <input class="trip_pack_v" type="text " placeholder="不限 " />
						                 </a>
						             </li>
						             <li class="mui-table-view-cell ">
						                  <a href="#trip_scenic_spot"  class="mui-navigate-right ">
						                         <span class="trip_expan_img">
						                         	<img src="${ctxStatic }/wx/img/day_img/jindian_taocan@2x.png " />
						                         </span>
						                         <label>必玩景点</label>
						                        <input class="trip_spot_v" type="text " placeholder="不限 " />
						                 </a>
						             </li>
						             <li class="mui-table-view-cell ">
						                  <a href="#trip_hotel" class="mui-navigate-right ">
						                         <span class="trip_expan_img">
						                         	<img src="${ctxStatic }/wx/img/day_img/zhusu_taocan@2x.png " />
						                         </span>
						                         <label>酒店标准</label>
						                        <input class="trip_hotel_v" type="text " placeholder="不限 " />
						                 </a>
						             </li>
						            <li class="mui-table-view-cell">
						          	 <span class="trip_expan_img">
						                 <img src="${ctxStatic }/wx/img/day_img/lianxiren_taocan@2x.png " />
						            </span>
						                <label>联系人</label>
						                 <input type="text " class="mui-input-clear " name="linkMan" placeholder="请填写联系人 " id="contacts">
						             </li>
						             <li class="mui-table-view-cell ">
						               <span class="trip_expan_img">
						                 <img src="${ctxStatic }/wx/img/day_img/dianhua_taocan@2x.png " />
						                 </span>
						                 <label>联系电话</label>
						                 <input type="text " class="mui-input-clear " name="phone" placeholder="请输入联系电话 " id="phone" value="${sessionScope.front_user.mobile}">
						             </li>
						      </ul>
						             <ul class="mui-table-view">
						                     <li class="mui-table-view-cell d_list_coupon">
						                         <a href="#coupon_total" class="mui-navigate-right " id="yhq">
						                             <span class="trip_expan_img">
						                             	<img src="${ctxStatic }/wx/img/day_img/mengpiao_taocan@2x.png" />
						                             </span>
						                             <label>优惠券</label>
						                             	<span class="do_cou_txt">请选择优惠券</span>
										                <span class="do_cou_ty"></span>
						                         </a>
						                     </li>
						                 </ul>
						                 <ul class="mui-table-view ">
						                     <li class="mui-table-view-cell ">
						                         <a href="#trip_reserve" class="mui-navigate-right ">
						                             <span class="trip_expan_img">
						                             	<img src="${ctxStatic }/wx/img/day_img/xuzhi_atbc@2x.png" />
						                             </span>
						                             <label>预订须知</label>
						                         </a>
						                     </li>
						                 </ul>
		总额：￥<span id="suitrtnprice"><c:set var="totalPrice" value="${price }"/>${price}  </span>
			<input type="hidden" name="totalPrice" value="${price}" id="total" />
			<button  id="sub" type="button">提交</button>
						         </form>	         
						 </div>
					</div>
				</div>
			</div>
		</div>
	    <div id="trip_play"  class="mui-page">
	   	   <div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">游玩主题</h1>
				<span class="trip_ture mui-action-back">确定</span>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					  <div class="mui-scroll">
					  	    <div class="trip_pack" id="ul1">
					  	    	<div class="mui-row trip_pack_list trip_pack_play">
					  	       	    	  <c:forEach items="${themeInfo}" var="index">
					  	       	    	  <div class="mui-col-xs-6">
					  	       	    	  	 <span class="trip_tp_btn" value="${index.themeId}">${index.theme}</span>
					  	       	    	  </div>
					  	       	    	  </c:forEach>
					  	       	    </div>
					  	       </div>
					  </div>
				</div>
			</div>
	   </div>
	   <div id="trip_traffic"  class="mui-page">
	   	     <div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">交通方式</h1>
				<span class="mui-action-back trip_ture">确定</span>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					  <div class="mui-scroll">
					  	   <div class="trip_pack">
					  	       	    <div class="mui-row trip_pack_list">
					  	       	    	  <c:forEach items="${TransportWayInfo}" var="index">
					  	       	    	  <div class="mui-col-xs-6">
					  	       	    	  	 <span class="trip_pack_btn" value="${index.transportWayId}">${index.transportWay}</span>
					  	       	    	  </div>
					  	       	    	  </c:forEach>
					  	       	    </div>
					  	       </div>
					  </div>
				</div>
			</div>
	   </div>
	   <div id="trip_scenic_spot"  class="mui-page">
	   	     <div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">必玩景点</h1>
				<span class="mui-action-back trip_ture">确定</span>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					  <div class="mui-scroll">
					  	     <div class="trip_spot">
					  	       	    <div class="mui-row trip_spot_list">
					  	       	    	   <c:forEach items="${sceneryList}" var="index">
					  	       	    	  <div class="mui-col-xs-6">
					  	       	    	  	 <span class="trip_spot_btn" value="${index.scenery}">${index.sceneryName} </span>
					  	       	    	  </div>
					  	       	    	  </c:forEach>
					  	       	    </div>
					         </div>
				</div>
			</div>
	   </div>
	</div>
        <div id="trip_hotel"  class="mui-page">
	   	    <div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">酒店标准</h1>
				<span class="mui-action-back trip_ture">确定</span>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					  <div class="mui-scroll">
					  	     <div class="trip_pack">
					  	       	    <div class="mui-row trip_pack_list">
					  	       	    	  <c:forEach items="${stayStandard}" var="index">
					  	       	    	  <div class="mui-col-xs-6">
					  	       	    	  	 <span class="trip_hotel_btn" value="${index.stayStandardId}">${index.stayStandard} </span>
					  	       	    	  </div>
					  	       	    	   </c:forEach>
					  	       	    </div>
					  	       	    <c:if test="${tripradio ==1}">
					  	       	     <div class="mui-row trip_pack_list" style="background: #fff;margin: 0 2.5%;">
					  	       	    	  <label class="trip_p_costs">预算金额（元/晚）</label>
					  	       	    	  <input class="trip_pa_writ" type="text" value="" id="lod"
					  	       	    	   placeholder="请输入金额" />
					  	       	    </div>
					  	       	    </c:if>
					  	       </div>
					  </div>
				</div>
			</div>
	   </div>
	   <div id="coupon_total" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">选择优惠券</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="ul">
					</div>
				</div>
			</div>
		</div>
	   <div id="trip_reserve"  class="mui-page">
	   	       <div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">预订须知</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					  <div class="mui-scroll">
					  	      <div class="trio_reserve">
					  	      	   <div class="reserve_tit">预定须知</p>
					  	      	   <div class="reserve_body">
					  	      	   	    <p>1、一经预定，即支付成功，无法退款。</p>
					  	      	   	    <p>2、请保持电话畅通，提交后2小时内将有行程顾问管家电话联系您，沟通更多出行信息。</p>
					  	      	   	    <p>3、行程规划过程中，您可以修改2-3次策划方案，直至满意。</p>
					  	      	   	     <p>4、我们将48小时内为您定稿专属方案，您可在订单列表-行程预览查看并分享。</p>
					  	      	   </div>
					  	      </div>
					  </div>
				</div>
			</div>
	   </div>
		<script type="text/javascript ">
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#trip_traval_ac'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city') {
					document.getElementById('search').focus();
					// 站点数据
					getSiteData();
				}
			});
		})(mui);
			Zepto(function(){
				$('#sub').on('tap', function() {
				var msg= '';
				var r = /^1[3|4|5|7|8]\d{9}$/;
				var y = $('#contacts').val();//出发地
				var z = $('#phone').val();//出发地
				if(y==''){
					msg = '请填写联系人';
				}else if(z==''){
					msg = '请填写联系电话';
				}else if(!r.test(z)){
					msg = '手机号格式不正确';
				}
				if(msg != ''){
					mui.alert(msg, '提示');
				} else{
					mui.post('${ctxFront}/mobile/tripcounselor',$('#subForm').serialize(),function(d){
								if(d.code=='200'){
									var orderid = d.data.orderId;
									window.location.href = "${ctxWx}/pu/pay/payWay?orderid="+orderid;
								}else{
									mui.alert(d.message);
								}
							});
				}
			})
				    //封装传值
				    function tripval(a,b,c,d){
                    $(a).on('tap',function(){
                    	  var  platxt=$(this).text();
                    	  $(this).addClass(b).parent().siblings().children(a).removeClass(b)
                    	  .parents(c).siblings().find(a).removeClass(b);
                    	  $(d).val(platxt);
                    })
               }
              tripval('.trip_tp_btn','trips_list_g','.trip_pack_list','.trip_play_v');
              tripval('.trip_pack_btn','trips_list_g','.trip_pack_list','.trip_pack_v');
              tripval('.trip_spot_btn','trips_list_g','.trip_spot_list','.trip_spot_v');
              tripval('.trip_hotel_btn','trips_list_g','.trip_pack_list','.trip_hotel_v');
			//代订酒店
			 	var tripTa='';
			  $('.trip_hotel_btn').click(function(){
			  	  tripTa=$(this).text();
			 	  	$(this).addClass('trips_list_g').parent().siblings().children('.trip_hotel_btn').removeClass('trips_list_g')
			 	  .parents('.trip_pack_list').siblings().find('.trip_hotel_btn').removeClass('trips_list_g');
			 	  })
			  
			  $('.trip_cx').on('tap',function(){
			  					var tripTc=$('.trip_pa_writ').val();
			  					
                $('.trip_hotel_v').val(tripTa+'(预算￥'+tripTc+')')
			 })
            //获取优惠券
			$('#yhq').on('tap', function() {
				mui.post('${ctxFront}/mobile/canusecupons',{userId:'${sessionScope.front_user.id}',nowPrice:$('#suitrtnprice').text()},function(d){
					if(d.code=='200'){
						var sm = d.data.info;
						var x = Number(totalprice);
						var table = document.getElementById("ul");
						table.innerHTML = "";//清空数据
						for (var i=0;i<sm.length;i++) {
							if(x<Number(sm[i].minPrice)){
								continue;
							}
							var div = document.createElement("div");
							var dateStr = getLocalTime(sm[i].timeOver);
							div.className = "coupon_t_wrap";
							var str = "";
							if(i==0){
								str += "<div class='no_coupon mui-action-back'>";
								str	+= "	<button type='button'>不使用优惠券</button>";
								str	+= "</div>";
							}
							str += "<div class='do_coupon mui-action-back'>";
							str += "<div class='mui-row'>";
							str += "<div class='mui-col-xs-4 do_coupon_cost'>";
							if (sm[i].type=='0') {//满减
								str += "<span class='do_cou_ct'>￥"+sm[i].price+"</span>";
							} else{//折扣
								str += "<span class='do_cou_ct'>"+sm[i].price+"折</span>";
							}
							str += "<span style='display:none;' class='cuponsMoney'>"+sm[i].price+"</span>";
							str += "</div>";
							str += "<div class='mui-col-xs-8 do_coupon_txt'>";
							str += "<p class='do_cou_type'>"+sm[i].name+"</p>";
							str += "<input type='hidden' class='cuponsId' name='cuponsId' value='"+sm[i].cuponRecordId+"'>";
							str += "<p>"+sm[i].instruction+"</p>";
							str += "<p>有效期至："+dateStr+"</p>";
							str += "</div>";
							str += "</div>";
							str += "</div>";
							
							div.innerHTML = str;
	            			table.appendChild(div);
						}
						if (table.innerHTML=="") {
							mui.alert("暂无可用优惠券")
						}
			$('.no_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsId1').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${price}';
				$('.do_coupon').removeClass('do_coupon_gc')
				$('.do_cou_txt').text('请选择优惠券').css('color', '#C8C7CC');
				$('.do_cou_ty').text('');
				var val =1;
				var totalprice = accMul(val,suitrtnprice);
				suitrtnprice = totalprice;
				$('#suitrtnprice').text(suitrtnprice);
				$('#total').val(suitrtnprice.toFixed(0));
			})
			//优惠券
			$('.do_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsId1').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${tRentproduct.office.airPrice}';
				$(this).addClass('do_coupon_gc').siblings('.do_coupon').removeClass('do_coupon_gc');
				//传值
				var costxt = $(this).find('.do_cou_ct').text();
				var costxt2 = $(this).find('.cuponsMoney').text();
				var costype = $(this).find('.do_cou_type').text();
				var cuponsId = $(this).find('.cuponsId').val();
				if(costxt.indexOf("折")>-1){
					$('.do_cou_txt').text(costxt).css('color', 'red');
				}else{
					$('.do_cou_txt').text('-' + costxt).css('color', 'red');
				}
				var val = 1;
				var totalprice = accMul(val,suitrtnprice);
				suitrtnprice = totalprice;
				if(costxt2<10){  //代表打折券
					suitrtnprice = Math.round(suitrtnprice * (costxt2/10));
					costxt2 = totalprice - suitrtnprice;
				}else{//满减券
					suitrtnprice = suitrtnprice - costxt2;
				}
				//清空优惠券信息
				$('#suitrtnprice').text(suitrtnprice);
				$('#total').val(suitrtnprice.toFixed(0));
				$('.do_cou_ty').text(costype);
				$('#cuponsId').val(cuponsId);
				$('#cuponsId1').val(cuponsId);
				$('#cuponsMoney').val(costxt2);
			})
					}else{
						mui.alert("暂无可用优惠券");
					}
				});
			});
			});
		</script>
	</body>

</html>